<script lang="ts" setup>
import { ref } from "vue";
import {goHanfuList,goIndex,goPackage,goActvieList,goSample} from "../../util/go"
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

const props = defineProps({
	index: {
		type: Number,
	}
})

const currentTab = ref(0);
const tabItems = ref([
  { text: "首页", icon: "home", go: goIndex},
  { text: "汉服", icon: "shop" , go: goHanfuList},
  { text: "套餐", icon: "gift", go: goPackage },
  { text: "样片", icon: "image", go: goSample },
  { text: "活动", icon: "flag", go: goActvieList },
]);

const handleTabClick = (index: number) => {
  currentTab.value = index;
  tabItems.value[index].go()
};
	
</script>

<template>
	
	<!-- 底部导航栏 -->
	<view class="tab-bar">
	  <view
	    class="tab-item cursor-pointer"
	    v-for="(tab, index) in tabItems"
	    :key="index"
	    @tap="handleTabClick(index)"
	  >
	    <uni-icons
	      :type="tab.icon"
	      size="24"
	      :color="props.index === index ? '#7fbfb0' : '#999'"
	    />
	    <text class="tab-text" :class="{ active: props.index === index }"
	      >{{ tab.text }}</text
	    >
	  </view>
	</view>
	
</template>

<style lang="scss" scoped>
	.tab-bar {
		.tab-item {
			.tab-text {
			  font-size: 12px;
			  color: #999;
			  margin-top: 8rpx;
			}
			.tab-text.active {
			  color: #7fbfb0;
			}
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  padding: 10rpx 0;
		}
	  display: flex;
	  position: fixed;
	  bottom: 0;
	  width: 100%;
	  justify-content: space-around;
	  align-items: center;
	  height: 100rpx;
	  background-color: #fff;
	  border-top: 1px solid #eee;
	}
</style>